<template>
  <div>
    <el-dialog v-el-drag-dialog title="File Attribuite" width="40%" :visible.sync="dialogVisible">
      <el-form ref="dataForm" :model="form" label-position="left" label-width="100px">
        <el-form-item label="File Name">{{ form.fileName }}</el-form-item>
        <el-form-item label="Category">{{ showText(form.category) }}</el-form-item>
        <el-form-item label="File Size">{{ form.fileSize | formatCapacity() }}</el-form-item>
        <el-form-item label="MD5">{{ form.md5 }}</el-form-item>
        <el-form-item label="Store Path">{{ form.physicalAddress }}</el-form-item>
        <el-form-item label="Description">{{ form.description }}</el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import elDragDialog from '@/directive/el-drag-dialog'

export default {
  name: 'FileAttribute',
  directives: { elDragDialog },
  data() {
    return {
      form: {},
      dialogVisible: false
    }
  },
  computed: {
    ...mapGetters(['uid', 'dictionaries']),
    categories() {
      return this.dictionaries.filter(dict => dict.dictGroup === 'file_category')
    }
  },
  created() {
    this.$on('open', function(row) {
      this.dialogVisible = true
      this.form = Object.assign({}, row, { category: row.category.toString() })
    })
  },
  methods: {
    showText(code) {
      const cate = this.categories.find(category => category.code === code)
      return (cate && cate.text) || ''
    }
  }
}
</script>
